<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优雅的打字机效果</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1a1a1a;
            margin: 0;
            color: #00ff88;
            line-height: 1.6;
        }
        .container {
            max-width: 800px;
            padding: 2rem;
            border: 1px solid #333;
            background: rgba(0, 0, 0, 0.7);
            box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
        }
        #text {
            font-size: 1.4rem;
            min-height: 200px;
        }
        .char {
            opacity: 0;
        }
        .cursor {
            display: inline-block;
            width: 10px;
            height: 1.4rem;
            background: #00ff88;
            vertical-align: middle;
            animation: blink 0.8s infinite;
            margin-left: 2px;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .btn {
            padding: 0.8rem 1.8rem;
            background: transparent;
            color: #00ff88;
            border: 1px solid #00ff88;
            font-family: 'Courier New', monospace;
            font-size: 1rem;
            margin-top: 2rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn:hover {
            background: rgba(0, 255, 136, 0.1);
            box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
        }
    </style>
</head>
<body>
<div class="container">
    <div id="text">const greeting = "你好，世界！";\n\nfunction typewriterEffect() {\n  // 这是一个优雅的打字机效果演示\n  // 使用GSAP的SplitText插件实现\n  // 每个字符都有自然的打字节奏\n  console.log("开始动画...");\n}</div>
    <span class="cursor"></span>
    <div>
        <button class="btn" id="replay">重新播放 (Ctrl+R)</button>
    </div>
</div>

<!-- 无需手动注册，可直接使用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
<script>
    // 注册插件
    gsap.registerPlugin(SplitText);

    let splitInstance;
    let typewriterTL;

    function initTypewriter() {
        // 清除现有实例和动画
        if (splitInstance) splitInstance.revert();
        if (typewriterTL) typewriterTL.kill();

        // 使用SplitText.create()静态方法
        splitInstance = SplitText.create("#text", {
            type: "chars",
            charsClass: "char",
            onSplit: (self) => {
                // 初始状态：所有字符透明
                gsap.set(self.chars, { opacity: 0 });

                // 创建打字机时间轴
                typewriterTL = gsap.timeline({
                    onStart: () => document.querySelector(".cursor").style.animationPlayState = "running",
                    onComplete: () => document.querySelector(".cursor").style.animationPlayState = "paused"
                });

                // 为每个字符添加动画
                self.chars.forEach((char, i) => {
                    const charText = char.textContent;
                    let delay = 0.05; // 基础延迟

                    // 根据字符类型调整延迟
                    if (charText.match(/[{}();:]/)) delay = 0.2;
                    else if (charText.match(/[\[\]'"=]/)) delay = 0.15;
                    else if (charText === " ") delay = 0.03;
                    else if (charText === "\n") delay = 0.4;

                    // 长单词后的空格增加延迟
                    if (charText === " " && i > 0 && self.chars[i-1].textContent !== " ") {
                        let wordLength = 0;
                        for (let j = i-1; j >= 0 && self.chars[j].textContent !== " "; j--) {
                            wordLength++;
                        }
                        if (wordLength > 8) delay = 0.2;
                    }

                    // 添加到时间轴
                    typewriterTL.to(char, {
                        opacity: 1,
                        duration: 0.02,
                        ease: "none",
                        onStart: () => {
                            // 模拟打字声音
                            if (charText !== " " && charText !== "\n") {
                                const pitch = 0.8 + Math.random() * 0.4;
                                playTypeSound(pitch);
                            }
                        }
                    }, i * delay);
                });
            }
        });
    }

    // 简单的打字声音效果
    function playTypeSound(pitch = 1) {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.type = "sine";
        osc.frequency.value = 120 * pitch;
        gain.gain.value = 0.02;

        osc.connect(gain);
        gain.connect(ctx.destination);

        osc.start();
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.1);
        osc.stop(ctx.currentTime + 0.1);
    }

    // 初始化动画
    document.addEventListener('DOMContentLoaded', () => {
        initTypewriter();

        // 重新播放按钮
        document.getElementById("replay").addEventListener("click", initTypewriter);

        // 键盘快捷键
        document.addEventListener("keydown", (e) => {
            if (e.ctrlKey && e.key === "r") {
                e.preventDefault();
                initTypewriter();
            }
        });
    });
</script>
</body>
</html>